<template>
  <div class="ke">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="powertop">
          <router-link class="powertopli powertopact" to="/finance/ke">可返利订单</router-link>
          <router-link class="powertopli " to="/finance/wait">待返利数据</router-link>
          <router-link class="powertopli " to="/finance/jilu">返利记录</router-link>
        </div>
        <div v-loading='loading' style="padding: 20px;">
          <div class="kflexc">
            <div style="width: 250px; margin-right: 20px;">
              <el-input v-model="all.mobile" placeholder="请输入生产号码"></el-input>
            </div>
            <div style="width: 250px; margin-right: 20px;">
              <el-input v-model="all.source_id" placeholder="请输入外部订单号"></el-input>
            </div>
            <div style="margin-right: 20px; font-size: 12px; color: #999;">订单激活时间</div>
            <div style="margin-right: 20px;">
              <el-date-picker  v-model="times" @change="timeschange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"  range-separator="至"  start-placeholder="开始日期"  end-placeholder="结束日期"></el-date-picker>
            </div>
            <el-button type="primary" round  style="margin-right: 20px;" @click="search()">搜索</el-button>


          </div>
          <div style="margin: 20px 0; height: 5px; width: 100%; background: #F3F5F8;"></div>

          <div class="kflexc">
            <el-button type="danger" round style="margin-right: 20px;" @click="uploasd">导入返利状态数据</el-button>

            <el-button type="primary" plain round style="margin-right: 20px;" @click="daochu">导出订单明细</el-button>
            <el-button type="primary" plain round style="margin-right: 20px;" @click="$router.push('/order_export7?id=37&name=返利订单明细')">查看导出记录</el-button>

            <el-button type="primary" plain round style="margin-right: 20px;" @click="$router.push('/finance/ke/daorubiao')">批量导入登记>></el-button>

            <!-- <el-upload ref="upload" action="#" :before-upload="uploasd" :show-file-list="false" accept=".xlsx,.xls">
               <el-button type="primary" round style="margin-right: 20px;">导入返利状态数据</el-button>
            </el-upload> -->
            <!-- <el-upload ref="upload" action="#" :http-request="(params) => uploasd(params,scope.row)" :show-file-list="false" v-if="!scope.row.import_file">
               <el-button type="text" round style="margin-right: 20px;">导入返利状态数据</el-button>
            </el-upload> -->
            <!-- <div @click="xiazai" style="margin-right: 20px; font-size: 12px; color: #999; cursor: pointer;">下载模板</div>
            <el-upload ref="upload" action="#" :before-upload="uploasd2" :show-file-list="false" accept=".xlsx,.xls">
               <el-button type="danger" round style="margin-right: 20px;">导入充值结果</el-button>
            </el-upload>
            <div @click="xiazai2" style="margin-right: 20px; font-size: 12px; color: #999; cursor: pointer;">下载模板</div> -->
          </div>

          <el-table :data="list" border style="width: 100%; margin: 20px 0;">
            <el-table-column align='center' prop='source_id' label="外部订单号"></el-table-column>
            <el-table-column align='center' prop='source' label="订单来源"></el-table-column>
            <el-table-column align='center' prop='fanli_mobile' label="生产号码"></el-table-column>
            <el-table-column align='center' prop='page_name' label="商品名称"></el-table-column>
            <el-table-column align='center' prop='fanli_money' label="返利金额"></el-table-column>
            <el-table-column align='center' prop='created_at' label="订单创建时间"></el-table-column>
            <el-table-column align='center' prop='active_at' label="激活时间"></el-table-column>
            <el-table-column align='center' prop='fanli_status' label="是否满足返利">
              <template slot-scope="scope">
                <span v-if="scope.row.fanli_status==-1">不满足</span>
                <span v-if="scope.row.fanli_status==1">满足</span>
              </template>
            </el-table-column>
            <!-- <el-table-column align='center' prop='fanli_money' label="返利">
              <template slot-scope="scope">
                {{fanli_money}}
              </template>
            </el-table-column> -->
            <el-table-column align='center' prop='fanli_time' label="领取次数">
              <template slot-scope="scope">
                {{scope.row.fanli_time_status}}/{{scope.row.fanli_time}}
              </template>
            </el-table-column>
            <el-table-column align='center' prop='dangyue_status_name' label="当月登记领取"></el-table-column>
            <el-table-column align='center' label="操作" width="200px">
              <template slot-scope="scope">
                <el-button type="text" @click="goid('/order_question/orderDetail',scope.row.order_id)">查看订单详情</el-button>
                <el-button type="text" @click="chakanxiangqing(scope.row)">登记返利</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size" :total="total"></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="返利领取记录" center :visible.sync="log" :close-on-click-modal="false" width="1200px">
      <el-table :data="list2" border style="width: 100%; margin: 20px 0;">
        <el-table-column align='center' prop='month' label="月份"></el-table-column>
        <el-table-column align='center' prop='status_name' label="领取状态"></el-table-column>
        <el-table-column align='center' prop='rebate_amount' label="金额"></el-table-column>
        <el-table-column align='center' prop='operator_at' label="登记时间"></el-table-column>
        <el-table-column align='center' prop='rebate_status_name' label="充值状态"></el-table-column>
        <el-table-column align='center' prop='remark' label="失败原因"></el-table-column>
        <el-table-column align='center' prop='rebate_at' label="到账时间"></el-table-column>
        <el-table-column align='center' label="登记返利">
          <template slot-scope="scope">
            <el-button v-if="vsdate(scope.row.month,nowdateym)" type="text" :disabled="!(scope.row.status <10)" @click="querenlingqu(scope.row)">登记返利</el-button>
            <el-button v-else type="text" :disabled="!(scope.row.status <10)" @click="querenlingqu(scope.row)">申请补领</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="log = false">好的</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import moment from "moment";
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: "ke",
    data() {
      return {
        times:[],
        loading:false,
        list:"",
        list2:"",
        all:{
          end:"",
          mobile:"",
          sourceid:"",
          start:"",
          page:1,
          page_size:20
        },
        total:0,
        log:false,
        nowdateym:''
      }
    },
    created() {
      this.getlist()
      //获取当前年月
      this.getNowDate()
      // console.log(this.vsdate())

    },
    mounted() {

    },
    methods: {
      daochu:function(){
        axios.post('/api/plan-market/export/rebate/order',this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('操作成功');
              this.$router.push('/order_export7?id=37&name=返利订单明细')
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      querenlingqu:function(item){
        const date1 = moment(item.month);
        const now = moment().format('YYYY-MM')
        const date2 = moment(now);
        const diffInHours = date1.diff(date2, 'hours');
        if(diffInHours == 0){
          axios.post('/api/plan-market/fanli/log/operate?id='+item.id)
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success('操作成功');
                this.getlist2()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        }else{
          this.$prompt('','请输入申请补领密码', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center:true,
            roundButton:true
          }).then((val) => {

            if(val.value == '123456'){
              axios.post('/api/plan-market/fanli/log/operate?id='+item.id)
                .then(response => {
                  if (response.data.msg.code == 0) {
                    this.$message.success('操作成功');
                    this.getlist2()
                  } else {
                    this.$message.error(response.data.msg.info);
                  }
                })
            }else{
              this.$message.error('密码错误');
            }
          })
        }
      },
      getlist2: function(item) {
        var that = this
        axios.get('/api/plan-market/fanli/logs?order_id='+item.order_id)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.list2 = response.data.data
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      chakanxiangqing:function(item){
        this.getlist2(item)
        this.log = true
      },

      timeschange(){
        if(this.times.length > 0){
          this.all.start = this.times[0]
          this.all.end = this.times[1]
        }
      },
      readExcel1(files) {
        return new Promise((res, rej) => {
          var that = this;
          if (files.length <= 0) {
            return;
          }
          if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
            this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');
            return;
          }
          const fileReader = new FileReader();
          fileReader.onload = (ev) => {
            try {
              const data = ev.target.result;
              const workbook = read(data, {
                type: 'binary'
              });
              // 取第一张表
              const wsname = workbook.SheetNames[0];
              // 生成json表格内容
              const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
              console.log(ws);
              // 后续为自己对ws数据的处理
              res(ws)
            } catch (e) {
              return false;
              rej(e)
            }
          };
          fileReader.readAsBinaryString(files[0]);
        })

      },
      uploasd(file, fileList) {
        this.goid('/finance/kedaoru')
        // var that = this
        // let files = {
        //   0: file
        // }
        // let data = []

        // let ff = this.readExcel1(files);
        // ff.then((res) => {
        //   console.log(res)
        //   res.forEach(item => {
        //     let can = 0
        //     if(item['是否满足领取'] == '满足'){
        //       can = 1
        //     }
        //     let obj = {
        //       mobile: item['生产号码'],
        //       can: can,
        //       remark: item['不满足原因'],
        //     }
        //     data.push(obj)
        //   })
        //   axios.post('/api/plan-market/fanli/canrebate/import',{data:data})
        //     .then(response => {
        //       if (response.data.msg.code == 0) {
        //         this.$message.success(`成功导入${response.data.data.success}条`);
        //         this.getlist()

        //         this.goid('/order_export6')
        //       } else {
        //         this.$message.error(response.data.msg.info);
        //       }
        //     })
        // })
      },
      uploasd2(file, fileList) {
        var that = this
        let files = {
          0: file
        }
        let data = []

        let ff = this.readExcel1(files);
        ff.then((res) => {
          console.log(res)
          res.forEach(item => {
            let suc = 0
            if(item['充值状态'] == '充值成功'){
              suc = 1
            }
            let obj = {
              mobile: item['生产号码'],
              suc: suc,
              remark: item['失败原因'],
            }
            data.push(obj)
          })
          axios.post('/api/plan-market/fanli/result/imp',{data:data})
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success(`导入成功`);
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },
      //获取导入详情
      uploadx: function() {
        var that = this
        axios.get('/api/plan-market/rebate/import/logs?month=' + this.uptime)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.uploadsuceess = response.data.data[0].success
              that.uploadtimes = response.data.data[0].times
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //统计

      search: function() {
        this.all.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.all.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        axios.get('/api/plan-market/fanli/list',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      //下载模板
      xiazai: function() {
        const a = document.createElement('a');
        a.setAttribute('download', '导入返利状态数据.xlsx');
        a.setAttribute('href',location.origin + location.pathname + 'static/fanlizhuangtai.xlsx');
        a.click();
      },
      //下载模板
      xiazai2: function() {
        const a = document.createElement('a');
        a.setAttribute('download', '导入充值结果.xlsx');
        a.setAttribute('href',location.origin + location.pathname +  'static/fanlichongzhijieguo.xlsx');
        a.click();
      },
      //获取当前年月
      getNowDate(){
        var date = new Date();
        var sign2 = ":";
        var year = date.getFullYear() // 年
        var month = date.getMonth() + 1; // 月
        var day = date.getDate(); // 日
        var hour = date.getHours(); // 时
        var minutes = date.getMinutes(); // 分
        var seconds = date.getSeconds() //秒
        var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
        var week = weekArr[date.getDay()];
        // 给一位数的数据前面加 "0"
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (day >= 0 && day <= 9) {
          day = "0" + day;
        }
        if (hour >= 0 && hour <= 9) {
          hour = "0" + hour;
        }
        if (minutes >= 0 && minutes <= 9) {
          minutes = "0" + minutes;
        }
        if (seconds >= 0 && seconds <= 9) {
          seconds = "0" + seconds;
        }
        console.log(year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds)
        //返回格式2022-11-25 10:25:39
        this.nowdateym = year + "-" + month
        console.log('返回格式日期')
        console.log(this.nowdateym)
      },
      //对比日期
      vsdate(date1,date2){
        // var date1 = '2024-07' //目标
        // var date2 = '2024-06' //当前
        console.log(date1.slice(0,4)*1)//年
        console.log(date1.slice(-2)*1)//月
        if(date1.slice(0,4)*1>date2.slice(0,4)*1){
          return true
        }else if(date1.slice(0,4)*1==date2.slice(0,4)*1){
          if(date1.slice(-2)*1>=date2.slice(-2)*1){
            return true
          }else{
            return false
          }
        }else{
          return false
        }


      }
    }
  }
</script>

<style lang="scss" scoped>
  .ke {
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style>
